<!DOCTYPE html>
<html>
<head>
    <% include ../include/css_header.html %>
    <style>
        .nav-tabs{
            border: none;
        }
        .nav-tabs a{
            color: #ffffff;
        }
        .active{
            opacity: 0.7;
        }
        .faction_act{
            margin-top: 10px;
        }
        #memberlist li{
            position: relative;
        }
        .tick_out{
            color: #ccc;
            position: absolute;
            right: 5px;
            top: 0;
        }
        .goods-item{
            background-color: #ffffff;
            padding: 8px;
            font-size: 12px;
            margin-top: 15px;
            border-radius: 3px;
        }
        .goods-img{
            border: 1px solid #e0e0e0;
        }
        .goods-img img{
            height: 125px;width: 116px;
        }
        .goods-name{
            font-size: 14px;
            font-weight: bold;
            margin-top: 5px;
        }
        .goods-price{
            color: #FE8125;
        }
    </style>
</head>
<body class="actlist_bg">
    <div class="container" style="min-height:640px">
        <% include ../include/top_bar_faction.html %>
        <!--<div class="top_bar">
            <a class="icon-arrow-left bar_left" href="/myfactions"></a>
            <a class="icon-cog bar_right" href="#" style=""></a>
        </div>-->
        <div class="row">
            <div class="col-xs-12 font_shadow_133000" style="color: #ffffff;text-align: center">
                <h3 id="title"><strong><%=faction.name %></strong></h3>
                圈子积分: <%=factionMember.score %>
            </div>
        </div>
        <div class="row">
            <div style="height: 10px;"></div>
            <div class="col-xs-12">
                <ul class="nav nav-tabs" role="tablist" id="myTab">
                    <li class="active"><a href="#activities" role="tab" data-toggle="tab">圈聚会</a></li>
                    <li><a href="#members" role="tab" data-toggle="tab">小伙伴</a></li>
                    <li><a href="#goods" role="tab" data-toggle="tab">积分商城</a></li>
                </ul>
            </div>
        </div>
        <div class="row" style="margin: 1px 0px 0px;">
            <div class="col-xs-12 bg_op_tab" style="min-height: 400px;">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="activities">
                        <div id="actlist">
                            <% var len = acts.length;
                            if(len > 0){
                            for(var i=0; i<len; i++){
                            var act = acts[i];
                            %>
                            <div class="bg_white_panel faction_act" data-id="<%=act.id %>">
                                <div>
                                    <strong><a href="/invite/<%=act.id %>"><%=act.name %></a></strong>
                                <span style="float: right;">
                                    <%=dateUtil.getZhDate(act.startTime, 'no') %>(周<%=dateUtil.getWeekday(act.startTime)%>)
                                </span>
                                </div>
                                <div>
                                    <span style="color: #666666">发起人:</span>
                                    <img class="img-rounded size_20" src="/img/<%=act.creator.id %>" />
                                    <span class="font_size_12" style="color: #006666;"><%=act.creator.name %></span>
                                </div>
                            </div>
                            <% } %>
                            <% }else{ %>
                            <div class="jumbotron" style="margin-top: 15px;">
                                <h1>圈内聚会</h1>
                                <p>大家聚在一起就能迸发能量！</p>
                                <p>...</p>
                                <p style="text-align: center">
                                    <a class="btn btn-success btn-lg" role="button" id="factionActBtn">发起圈内聚会</a>
                                </p>
                            </div>
                            <% } %>
                        </div>
                        <% if(acts.length >= 5){ %>
                        <div id="loadMoreAct" style="margin: 10px 0">
                            查看更多
                            <span class="icon-arrow-down"></span>
                        </div>
                        <% } %>
                        <input type="hidden" id="actPageNo" value="2" />
                        <div style="height: 10px;"></div>
                        <button type="button" class="btn btn-success btn-block" id="factionActBtn">发起圈内聚会</button>
                    </div>
                    <div class="tab-pane fade" id="members">
                    </div>
                    <div class="tab-pane fade" id="goods">
                        <!--<div class="jumbotron" style="margin-top: 15px;">
                            <h1>还在施工中！</h1>
                            <p>敬请期待</p>
                            <p>...</p>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <img id="msg_logo" src="http://wechatjh.fourjoy.net/flogo/<%=id %>.jpg" onError="this.src='http://wechatjh.fourjoy.net/message_img.jpg';" style="display: none;"/>
        <% include ../include/copyright.html %>
    </div>
    <% include ../include/guide_tip.html %>
    <% include ../include/slide_menu.html %>
    <% include ../include/slide_menu_faction_right.html %>
<% include ../include/js_footer.html %>
<script src="<%=_locals.static_js_path %>/faction.js"></script>
<script type="text/javascript">
    var factionId = '<%=id %>';
    var userId = '<%=user.id %>';
    var factionOwner = '<%=faction.creator._id %>';
    var shareData = {
        img_url: $('#msg_logo').attr('src'),
        link: siteGlobal.SITE_HOST+'/faction/info/'+factionId+'/'+userId,
        title: '快来加入我的圈子“<%=faction.name %>”，志同道合不醉不归!',
        desc: '本圈宗旨：<%=faction.description %> 保护隐私，谢绝推广，违规踢出哦～'
    }
    $(function(){
        <% if(faction.memberCount == 1){ %>
            $('#myTab a[href="#members"]').tab('show');
        <% } %>
        WeixinUtil.initConfig(['onMenuShareTimeline', 'onMenuShareAppMessage'], true, function(){
            WeixinUtil.sharePage(shareData.title, shareData.desc, shareData.img_url, shareData.link)
        })
    });
</script>
</body>
</html>